<template>
  <div>
    <el-row type="flex" class="row-bg" justify="center" :gutter="20">
      <el-col :span="4">
        <div class="grid-content" style="background-color: #76f0bb;">
          <el-card class="box-card">
            <el-row>
              <el-col class="NumberFont" :span="24" style="text-align: center;">
                <span class="NumberNullFont">{{ showNon(totalSet) }}</span>
                <span>{{ totalSet }}</span>
              </el-col>
              <el-col class="NumberIntroductionFont" :span="24" style="text-align: center;">
                总车位数
              </el-col>
            </el-row>
          </el-card>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content" style="background-color: #76f0bb;">
          <el-card class="box-card">
            <el-row>
              <el-col class="NumberFont" :span="24" style="text-align: center;">
                <span class="NumberNullFont">{{ showNon(nullSet) }}</span>
                <span>{{ nullSet }}</span>
              </el-col>
              <el-col class="NumberIntroductionFont" :span="24" style="text-align: center;">
                剩余车位数
              </el-col>
            </el-row>
          </el-card>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content" style="background-color: #76f0bb;">
          <el-card class="box-card">
            <el-row>
              <el-col class="NumberFont" :span="24" style="text-align: center;">
                <span class="NumberNullFont">{{ showNon(yesterdaySet) }}</span>
                <span>{{ yesterdaySet }}</span>
              </el-col>
              <el-col class="NumberIntroductionFont" :span="24" style="text-align: center;">
                昨日停车数
              </el-col>
            </el-row>
          </el-card>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content" style="background-color: #76f0bb;">
          <el-card class="box-card">
            <el-row>
              <el-col class="NumberFont" :span="24" style="text-align: center;">
                <span class="NumberNullFont">{{ showNon(todaySet) }}</span>
                <span>{{ todaySet }}</span>
              </el-col>
              <el-col class="NumberIntroductionFont" :span="24" style="text-align: center;">
                今日停车数
              </el-col>
            </el-row>
          </el-card>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content" style="background-color: #76f0bb;">
          <el-card class="box-card">
            <el-row>
              <el-col class="NumberFont" :span="24" style="text-align: center;">
                <span class="NumberNullFont">{{ showNon(laneOnline) }}</span>
                <span>{{ laneOnline }}</span>
              </el-col>
              <el-col class="NumberIntroductionFont" :span="24" style="text-align: center;">
                车道在线
              </el-col>
            </el-row>
          </el-card>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content" style="background-color: #76f0bb;">
          <el-card class="box-card">
            <el-row>
              <el-col class="NumberFont" :span="24" style="text-align: center;">
                <span class="NumberNullFont">{{ showNon(laneOffline) }}</span>
                <span>{{ laneOffline }}</span>
              </el-col>
              <el-col class="NumberIntroductionFont" :span="24" style="text-align: center;">
                车道离线
              </el-col>
            </el-row>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-row justify="center" :gutter="20">
      <el-col :span="18" style="margin-top: 12px;">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>订单快捷查询</span>
          </div>
          <div>
            <el-form inline :model="startQuickFilterFields">
              <el-form-item label="车牌号">
                <el-input v-model="startQuickFilterFields.CarNo" placeholder="车牌号"></el-input>
              </el-form-item>
              <el-form-item label="开始时间">
                <el-date-picker v-model="startQuickFilterFields.StartTime" type="datetime" value-format="yyyyMMddHHmmss" :editable="false" placeholder="开始时间"></el-date-picker>
              </el-form-item>
              <el-form-item label="结束时间">
                <el-date-picker v-model="startQuickFilterFields.EndTime" type="datetime" value-format="yyyyMMddHHmmss" :editable="false" placeholder="结束时间"></el-date-picker>
              </el-form-item>
              <el-form-item label="入场时间">
                <el-date-picker v-model="startQuickFilterFields.InTime" type="datetime" value-format="yyyyMMddHHmmss" :editable="false" placeholder="入场时间"></el-date-picker>
              </el-form-item>
              <el-form-item label="订单号">
                <el-input v-model="startQuickFilterFields.OrderNo" placeholder="订单号"></el-input>
              </el-form-item>
              <el-form-item label="支付时间">
                <el-date-picker v-model="startQuickFilterFields.PayTime" type="datetime" value-format="yyyyMMddHHmmss" :editable="false" placeholder="支付时间"></el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
              </el-form-item>
            </el-form>
          </div>

          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="CarNo" label="车牌号码"></el-table-column>
            <el-table-column prop="CarType" label="费用类型"></el-table-column>
            <el-table-column width="150" prop="InTime" label="入场时间"></el-table-column>
            <el-table-column width="150" prop="PayTime" label="支付时间"></el-table-column>
            <el-table-column width="150" prop="ChannelTime" label="渠道支付时间"></el-table-column>
            <el-table-column prop="Channel" label="支付渠道">
              <template slot-scope="scope">
                <span v-if="scope.row.Channel === 'weixin'" style="color: #55a532">微信</span>
                <span v-else-if="scope.row.Channel === 'alipay'"  style="color: #a59232">支付宝</span>
                <span v-else-if="scope.row.Channel === 'blpay'"  style="color: #327ba5">泊链</span>
                <span v-else  style="color: #c096c4">其他</span>
              </template>
            </el-table-column>
            <el-table-column prop="PayType" label="支付方式">
              <template slot-scope="scope">
                <span v-if="scope.row.PayType === 'hostscan'">主扫</span>
                <span v-else-if="scope.row.PayType === 'obeyscan'">被扫</span>
                <span v-else-if="scope.row.PayType === 'ordercode'">一单一码</span>
                <span v-else-if="scope.row.PayType === 'autopay'">无感</span>
                <span v-else-if="scope.row.PayType === 'cash'">现金</span>
                <span v-else-if="scope.row.PayType === 'apppay'">app支付</span>
                <span v-else-if="scope.row.PayType === 'facepay'">刷脸</span>
                <span v-else-if="scope.row.PayType === 'prestore'">预存</span>
                <span v-else-if="scope.row.PayType === 'other'">其他</span>
                <span v-else>其他</span>
              </template>
            </el-table-column>
            <el-table-column prop="MustFee" label="应收金额(元)">
              <template slot-scope="scope">
                {{  parseInt(scope.row.MustFee) / 100 }}
              </template>
            </el-table-column>
            <el-table-column prop="PayFee" label="实收金额">
              <template slot-scope="scope">
                {{  parseInt(scope.row.PayFee) / 100 }}
              </template>
            </el-table-column>
            <el-table-column prop="FeeType" label="费用类型">
              <template slot-scope="scope">
                <span v-if="parseInt(scope.row.FeeType) === 0">正常缴费</span>
                <span v-else-if="parseInt(scope.row.FeeType) === 1">超时补费</span>
                <span v-else>其他</span>
              </template>
            </el-table-column>
            <el-table-column prop="PayStaus" label="支付状态">
              <template slot-scope="scope">
                <span v-if="scope.row.PayStaus === 'wait'">等待</span>
                <span v-else-if="scope.row.PayStaus === 'lost'">失败</span>
                <span v-else-if="scope.row.PayStaus === 'ok'">成功</span>
                <span v-else-if="scope.row.PayStaus === 'cancel'">取消</span>
                <span v-else>其他</span>
              </template>
            </el-table-column>
            <el-table-column width="220" prop="PayNo" label="支付流水号"></el-table-column>
            <el-table-column width="220" prop="OrderNo" label="订单号"></el-table-column>
            <el-table-column prop="ParkName" label="车场名称"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="6" style="margin-top: 12px;">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>快速开闸</span>
          </div>
          <el-form :model="openGateFields" class="demo-form-inline">
            <el-form-item label="车牌号">
              <el-input v-model="openGateFields.CarNo" placeholder="车牌号" style="width: 80%;"></el-input>
            </el-form-item>
            <el-form-item label="车辆类型">
              <el-select v-model="openGateFields.CarType" placeholder="车辆类型">
                <el-option label="临时卡A" value="临时卡A"></el-option>
                <el-option label="月卡A" value="月卡A"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="开闸机号">
              <el-input v-model="openGateFields.MachNo" placeholder="开闸机号" style="width: 80%;"></el-input>
            </el-form-item>
            <el-form-item label="放行原因">
              <el-input v-model="openGateFields.Memo" type="textarea" autosize placeholder="请输入内容" :autosize="{ minRows: 3, maxRows: 5}" style="width: 80%;"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="reqOpen">手动开闸</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Vue from 'vue';
import axios from 'axios'
import BasicCard from "@/components/Basic/Card/BasicCard.vue";
import MainImage from "@/components/Basic/Image/MainImage.vue";

export default Vue.extend({
  components: {BasicCard, MainImage},
  data: () => ({
    totalSet: 0,
    nullSet: 0,
    yesterdaySet: 0,
    todaySet: 0,
    laneOnline: 0,
    laneOffline: 0,

    startQuickFilterFields: {
      CarNo: "",
      StartTime: "",
      EndTime: "",
      InTime: "",
      OrderNo: "",
      PayTime: "",
    },
    tableData: [],

    openGateFields: {
      CarNo: "",
      CarType: "",
      MachNo: "",
      Memo: "",
    },
  }),
  methods: {
    reqStatistic() {
      axios.get("http://218.75.78.171:9082/api/park/index")
        .then(resp => {
          let {data: {data: {totalSet, nullSet, yesterdaySet, todaySet, laneOnline, laneOffline}}} = resp
          this.totalSet = totalSet
          this.nullSet = nullSet
          this.yesterdaySet = yesterdaySet
          this.todaySet = todaySet
          this.laneOnline = laneOnline
          this.laneOffline = laneOffline
        })
    },
    showNon(num) {
      let numLength = 5 - num.toString().length
      return ''.padStart(numLength, '0')

    },
    reqListOrder() {
      axios.get("http://218.75.78.171:9082/api/bo/getPayList", {
        params: {
          ...this.startQuickFilterFields
        }
      }).then(resp => {
        let { data: { status_code, data: { list: { PayInfo } } }} = resp
        if (PayInfo instanceof Array) {
          this.tableData = PayInfo
        } else {
          this.tableData = [ PayInfo ]
        }
      }).catch(err => {
        this.$message.error('查询错误');
      })
    },
    search() {
      this.reqListOrder()
    },
    reqOpen() {
      axios.get("http://218.75.78.171:9082/api/bo/upOpenCmd", {
        params: {
          ...this.openGateFields
        }
      }).then(resp => {+
        this.$message.success("开闸成功")
      }).catch(err => {
        this.$message.error("开闸失败")
      })
    }
  },
  created() {
    this.reqStatistic()
    this.reqListOrder()
  }
})
</script>
<style lang="scss" scoped>
@font-face {
  font-family: 'Digital-7Mono';
  src: url('../../fonts/Digital-7Mono.ttf') format('truetype');
}

.NumberFont {
  font-family: Digital-7Mono, sans-serif;
  font-size: 72px;
  height: 80px;
}

.NumberNullFont {
  font-family: Digital-7Mono, sans-serif;
  font-size: 72px;
  height: 80px;
  color: #ccccd7;
}

.NumberIntroductionFont {
  font-weight: bold;
  color: #8c939d;
}
</style>
